<template>
    <!-- 歌手 -->
    <div id="in">
        <Nav></Nav>
        <!-- 带图片歌手 -->
        <el-row style="width: 80%;margin: 50px auto;">
            <div v-for="(o, index) in songImg">
                <el-col :span="4" :key="index" style="margin-top: 20px;">
                    <router-link to="">
                        <el-card class="col">
                            <img :src='"/api" + o.singerImg' class="image">
                            <div style="padding: 14px;">
                                <router-link :to="{path:'/singerDetails',query:{id:o.singerName}}" class="word">
                                    {{ o.singerName }}
                                </router-link>
                            </div>
                        </el-card>
                    </router-link>
                </el-col>
                <el-col :span="1" v-if="(index + 1) % 5 != 0">
                    <div>&nbsp;</div>
                </el-col>
            </div>
        </el-row>
        <!-- 不带图片歌手 -->
        <el-row style="width: 80%;margin: 0px auto;">
            <div v-for="(o, index) in songName">
                <el-col :span="4" :key="index">
                    <div style="padding: 14px;">
                        <router-link to="">{{ o.singerName }}</router-link>
                    </div>
                </el-col>
                <el-col :span="1" v-if="(index + 1) % 5 != 0">
                    <div>&nbsp;</div>
                </el-col>
            </div>
        </el-row>
        <Footer></Footer>
    </div>
</template>

<script>
import Nav from "../components/nav.vue";
import Footer from "../components/footer.vue";
export default {
    data() {
        return {
            songImg: "",
            songName: ""
        }
    },
    components: {
        Nav,
        Footer
    },
    methods: {
        
    },
    created: function () {
        this.axios({
            url: "/api/listens/singers",
        }).then(res => {
            this.songImg = res.data.data.singers.slice(1, 11);
            this.songName = res.data.data.singers;
            this.songName.splice(0, 11)
        }).catch(err => {
            console.log("歌手请求失败");
        })
    }
};
</script>
<!-- <style  ></style> -->
<style scoped>
#in {
    text-align: center;
    margin: 0px;
    padding: 0px;
}

.col /deep/ :hover{
    /* 深度选择器 /deep/ 修改element ui样式 */
    background-color: plum;
    color: white;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 90px;
    height: 90px;
    border-radius: 100px;
}

/* .in .songImg{
    margin-top: 20px;
} */
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
a{
    color: black;
    text-decoration: none;
}
a:hover{
    cursor: pointer;
    color: plum;
}
</style>